<template>
  <div class="laborUnit">
    <!-- logo -->
    <div style="height:100px;background:#fff">
      <title1 class="topLogo"></title1>
    </div>

    <!--头部面包屑-->
    <div class="breadCrumbBox flexCenter">
      <div style="width: 1200px;height: 100%;" class="flexAlignCenter">
        <a-breadcrumb separator=">">
          <a-breadcrumb-item :to="home">
            <router-link :to="projectDetail">首页</router-link>
          </a-breadcrumb-item>
          <a-breadcrumb-item :to="$route.matched[0]">
            <router-link :to="projectDetail">京沪高速公路新沂至淮安段改扩建工程</router-link>
          </a-breadcrumb-item>
          <a-breadcrumb-item>
            <router-link :to="construction">江苏省交通工程集团有限公司</router-link>
          </a-breadcrumb-item>
          <a-breadcrumb-item>南京仁泰基础工程有限公司</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
    </div>
    <!-- 顶部内容 -->
    <div class="top flexBetween">
      <div class="logo">
        <div class="logo_text">劳务单位</div>
        <!-- <div style="text-align:center">SG-1标</div> -->
      </div>
      <div class="right">
        <div class="title">南京仁泰基础工程有限公司</div>

        <div class="info flexStart2">
          <div>
            <span>类型：专业分包</span>
            <span></span>
          </div>
          <div>
            <span>负责人：</span>
            <span @click="peopleDetail">马志超</span>
          </div>
          <div>
            <span>联系电话：13152981030</span>
            <span></span>
          </div>
          <div>
            <span>劳资管理员：</span>
            <span @click="peopleDetail">王超群</span>
          </div>
          <div>
            <span>联系电话：15109083215</span>
            <span></span>
          </div>
          <div>
            <span>分包合同：</span>
            <span @click="showPdf" style="cursor:pointer;">分包合同.pdf</span>
          </div>
          <div>
            <span>委托工资支付协议：</span>
            <span @click="showPdf" style="cursor:pointer;">委托工资支付协议.pdf</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 查看pdf -->
    <a-modal
      v-model="visible"
      title
      @ok="handleOk"
      :footer="null"
      :maskClosable="false"
     
    >
      <embed
        width="1000"
        height="700"
        src="http://it-jhkj.zhinengjianshe.com/uploadfile/temp/device/2cd6a578de5d447cbcc70fd857b3b31c/2cd6a578de5d447cbcc70fd857b3b31c.pdf"
        type
      />
    </a-modal>
    <!-- 班组信息 -->
    <div class="teamTem">
      <div style="width:100%;border-bottom:1px solid #ccc;margin-bottom: 30px;height:45px">
       <div class="team_title">班组信息</div> 
      </div>
      
      <team />
    </div>
    
      <supportCompany></supportCompany> 
 
   
  </div>
</template>

<script>
import title1 from "@/views/title/index.vue";
import team from "./team/index";
import supportCompany from "@/views/supportCompany/index.vue";
export default {
  components: {
    title1,
    team,
    supportCompany
  },
  data() {
    return {
      home:'/gateway',
      projectDetail: "/projectDetails",
      construction: "/fu/construction",
      visible: false
    };
  },
  mounted() {
    
  window.scrollTo(0, 0);
  },
  methods: {
    pdfDow() {
      window.open(
        "http://it-jhkj.zhinengjianshe.com/uploadfile/temp/device/2cd6a578de5d447cbcc70fd857b3b31c/2cd6a578de5d447cbcc70fd857b3b31c.pdf"
      );
    },
    showPdf() {
      this.visible = true;
    },
    handleOk(e) {
      //   console.log(e);
      this.visible = false;
    },
    peopleDetail(){
      this.$router.push({path:'/personnelInformation'})
    }
  }
};
</script>

<style scoped>
.laborUnit {
  width: 100%;
  margin: 0 auto;
}
.topLogo {
  position: fixed;
  left: calc(50% - 650px);
  top: 0;
  z-index: 11;
  background: #ffffff;
}
.breadCrumbBox {
  width: 100%;
  height: 40px;
  background-color: rgba(246, 248, 249, 1);
}
.top,.teamTem{
  width: 1200px;
  margin: 0 auto;
}
.teamTem{
  margin-bottom: 140px;
}
.top {
  /* width: 1200px;
  margin: 0 auto; */
  margin-bottom: 20px;
  font-size: 15px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 31px;
  padding-top: 40px;
  margin-bottom: 70px;
  height: 300px;
}
.logo {
  margin-right: 41px;
}
.logo_text {
  width: 140px;
  height: 140px;
  background: #00cc00;
  color: #ffffff;
  line-height: 50px;
  font-size: 38px;
  padding: 20px 33px 24px 31px;
}
.right {
  width: 1019px;
}
.title {
  font-size: 24px;
  line-height: 31px;
  margin-bottom: 22px;
}
.info {
  font-size: 15px;
  color: #333333;
  line-height: 31px;
  width: 1019px;
  height: 220px;
  background: #f5faff;
  padding: 10px 30px;
}
.info div {
  width: 319px;
}
.info div :nth-child(2) {
  color: #1890ff;
   cursor: pointer;
}

.team_title {
  width: 90px;
  height: 45px;
  font-size: 16px;
  line-height: 45px;
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
  text-align: center;
  margin-left: 30px;
  
}
::v-deep .ant-modal {
  width: 1080px !important;
  top:10px
}
::v-deep .ant-modal-body {
  padding: 40px;
  height: 780px;
}
::v-deep .ant-breadcrumb > span:last-child {
  color: rgba(20, 146, 255, 1);
}
</style>
